<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f00;
        }
    </style>
</head>

<body>


    <div class="box">

    </div>

    <button class="a">点击出现span</button>


    <button class="b">点击出现span</button>

    <script>


        // 单例模式
        //    一个类只有一个实例

        //    假如有参数，可以只创建一个实例，但是返回一个初始化函数 --- 这个函数是可以反复被调用的


        const fn = (function () {
            function Fn(el) {
                this.el = document.querySelector(el);
                this.f()
            }

            Fn.prototype.f = function () {
                this.oSpan = document.createElement('span');
                this.el.appendChild(this.oSpan);
            }

            // 传递参数
            Fn.prototype.init = function (title, color) {
                this.oSpan.innerHTML = title;
                this.oSpan.style.color = color;
            }


            // 希望这个Fn这个类只有一个实例
            let obj = null;

            // 创建一个实例
            return function (...arr) {   // 这里的参数是给init这个方法的
                if (!obj) {
                    // 如果没有就创建一个实例     这里的代码只会执行一次
                    obj = new Fn('.box');
                }

                // 这里的代码始终都会执行   
                obj.init(...arr);

                return obj
            }


        })()




        const oBtn = document.querySelector('.a');
        oBtn.onclick = function () {
            fn('hello', 'white')
        }


        // 第二次创建实例的时候  发现无法传参  --- 

        const oBtn2 = document.querySelector('.b');
        oBtn2.onclick = function () {
            fn('hi', 'yellow')

        }

    </script>

</body>

</html>